<template>
	<div>
		<div class="notice marginAuto" @scroll="ointsescrollfun">
			<div class="noticeitem" v-for="(item,index) in noticedata" :key="index">
				<div class="noticeitemt" @click="shownoticefun(item,index)">
					<div class="noticeitemt-title">{{ item.title }}</div>
					<div class="noticeitemt-time">{{ item.create_time }}</div>
					<div class="noticeitemt-msg mainbg" v-if="!item.is_read"></div>
				</div>
				<div class="noticeitemb">
					<div class="noticeitembmain" v-html="item.content" :class="item.isshow ?  'noticeitembmainshow':''"></div>
					<div class="showall mainbg el-icon-arrow-up" v-if="item.isshow"></div>
					<div class="showall mainbg el-icon-arrow-down" v-if="!item.isshow"></div>
				</div>
			</div>
			<div class="loadingicon" v-if="isloadingicon" style="height:20px;text-align:center;"><span class="el-icon-loading" style="font-size:22px;"></span></div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				limit:20,
				isloadingicon:false,
				isshake:true,
				noticedata: []
			}
		},
		methods: {
			shownoticefun(item, index) {
				if(item.isshow){
					this.noticedata[index].isshow = false;
					return false;
				}
				this.noticedata.forEach((item,index)=>{
					this.$set(item,'isshow',false)
				})
				this.noticedata[index].isshow = true;
				this.apifun.$post('/pc/article/getArticleDetail', {
					id: item.id
				}).then((res) => {
					if (res.code == 200) {
						this.noticedata[index].is_read = true;
					}
				})
				if(!item.is_read){
					this.$emit('getnoticenum')
				}
			},
			getnoticefun() {
				let snedData = {
					page:this.page,
					limit:this.limit,
				};
				this.apifun.$post('/pc/article/getArticleList', snedData).then((res) => {
					// console.log(res)
					this.isshake = true;
					if (res.code == 200) {
						if(res.data.data.length <= 0){
							this.page--
							return false
						};
						this.noticedata = [...this.noticedata,...res.data.data];
					}
				})
			},
			ointsescrollfun(event){
				const { scrollTop, scrollHeight, clientHeight } = event.target;
				if (this.isloadingicon) return;
				if (scrollTop + clientHeight >= scrollHeight - 10) {  // 留10px加载
					if(this.isshake){
						this.isshake = false;
						this.page++;
						this.getnoticefun();
					}
				}
			}
		},
		mounted() {
			this.getnoticefun()
		},
	}
</script>

<style scoped lang="scss">
	.notice {
		width: 96%;
		height:91vh;
		overflow-y:auto;
		.noticeitem {
			width: 100%;
			margin-top: 10px;
			background-color: #fff;
			border-radius: 8px;

			.noticeitemb {
				position: relative;
				width: 96%;
				padding: 10px 2%;

				.noticeitembmain {
					width: 98%;
					height:20px;
					overflow-y: hidden;
					line-height: 20px;
					color: #333;
					font-size: 14px;
				}

				.noticeitembmainshow {
					height: auto;
				}

				.showall {
					position: absolute;
					right: 10px;
					bottom: 10px;
					width: 15px;
					height: 15px;
					line-height: 15px;
					font-size: 10px;
					border-radius: 50%;
					color: #fff;
					text-align: center;
				}
			}

			.noticeitemt {
				position: relative;
				width: 96%;
				padding: 10px 2%;
				border-bottom: 1px solid #EEEEEE;

				.noticeitemt-title {
					line-height: 20px;
					font-size: 16px;
					color: #333333;
					font-weight: bold;
				}

				.noticeitemt-time {
					line-height: 20px;
					font-size: 12px;
					color: #666666;
				}

				.noticeitemt-msg {
					position: absolute;
					right: 10px;
					top: 10px;
					width: 10px;
					height: 10px;
					border-radius: 50%;
				}
			}
		}
	}
</style>